
<template>
  <div class="quill-editor">
    <quill-editor
      v-model="content"
      :ref="qeName"
      :style="styles"
      :options="editorOption"
      @blur="onEditorBlur($event)" 
      @focus="onEditorFocus($event)" 
      @ready="onEditorReady($event)" 
      @change="onEditorChange($event)"
    >
    </quill-editor>
  </div>
</template>
 
<script>
import {quillEditor, Quill} from 'vue-quill-editor'
import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module'
Quill.register('modules/ImageExtend', ImageExtend)
 
export default {
  props: {
    /* 编辑器的内容 */
    value: {
      type: String,
      default: "",
    },
    /* 高度 */
    height: {
      type: Number,
      default: null,
    },
    /* 最小高度 */
    minHeight: {
      type: Number,
      default: null,
    },
    name: {
      type: String,
      default: () => 'QuillEditor',
    }
  },
  components: {
    quillEditor
  },
  data () {
    return {
      content: '',
        // 富文本框参数设置
        editorOption: {  
          placeholder: '请在这里输入',
          modules: {
            ImageExtend: {
              loading: true,
              name: 'file',
              action: '/web/index.php?_mall_id=1&r=common/attachment/upload',
              headers: (xhr) => {
                xhr.setRequestHeader('x-access-token',this.$store.getters.access_token);
                xhr.setRequestHeader('Source-Type',0);

              }, 
              response: (res) => {
                console.log('res', res);
                return res.data.url
              }
            },
            toolbar: {
              container: container,
              handlers: {
                'image': function () {
                  QuillWatch.emit(this.quill.id)
                }
              }
            }
          }
        },
      
      uploadUrl: '/web/index.php?_mall_id=1&r=common/attachment/upload',     // 服务器上传地址
      header:{ 'x-access-token': this.$store.getters.access_token, 'Source-Type': 0 } 
    }
  },
  computed: {
    styles() {
      let style = {};
      if (this.minHeight) {
        style.minHeight = `${this.minHeight}px`;
      }
      if (this.height) {
        style.height = `${this.height - 100}px`;
      }
      return style;
    },
    qeName(){
      return this.name;
    }
  },
  watch: {
    value: {
      handler(val) {
        if (val !== this.content) {
          this.content = val === null ? "" : val;
          if (this.Quill) {
            this.Quill.pasteHTML(this.content);
          }
        }
      },
      immediate: true,
    },
  },
  methods: {
    // 失去焦点
    onEditorBlur (editor) { },
    // 获得焦点
    onEditorFocus (editor) { },
    // 开始
    onEditorReady (editor) { },
    // 值发生变化
    onEditorChange (editor) {
      this.content = editor.html;
      this.$emit('update:value', this.content);
    },
    uploadBefore (file) { },
    uploadSuccess (res) {
      // 获取富文本组件实例
      let quill = this.$refs[this.qeName].quill
      console.log('quill', quill);
      // 如果上传成功
      if (res) {
        // 获取光标所在位置
        let length = quill.getSelection().index;
        // 插入图片，res为服务器返回的图片链接地址
        quill.insertEmbed(length, 'image', res.data.url)
        // 调整光标到最后
        quill.setSelection(length + 1);
      } else {
        // 提示信息，需引入Message
        this.$message.error('图片插入失败！')
      }
    }
  }
}
</script>